<script setup>
import { findTree, queryMenuDetail } from '@/api/system/menu'
import iconfont from '@/icons/menu/iconfont.json'

const props = defineProps({
  menuType: {
    type: String,
    default: ''
  },
  id: {
    type: String,
    default: ''
  },
  parentId: {
    type: String,
    default: '0'
  },
  visible: {
    type: Boolean,
    required: true
  }
})
const emit = defineEmits(['update:visible', 'create', 'update'])
const formRef = ref()
const pageData = reactive({
  parentTreeData: [],
  isShowIcon: false
})
const formData = reactive({
  parentId: '',
  name: '',
  type: 'MENU', // 菜单类型 1目录 2菜单 3按钮
  permissionChar: '',
  sort: '',
})
const formRules = reactive({
  parentId: [{ required: true, trigger: 'blur', message: '请输入上级菜单' }],
  name: [{ required: true, trigger: 'blur', message: '请输入菜单名称' }],
  type: [{ required: true, trigger: 'blur', message: '请选择菜单类型' }],
  permissionStr: [{ required: true, trigger: 'blur', message: '请输入权限字符' }]
})
const handleCreate = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      submitBtnLoading.value = true
      const { id, menuType } = props
      if (!id) {
        const param = {
          ...formData
        }
        if (menuType == 'TOP_MENU') {
          param.parentId = '0'
          // delete param.permissionStr
        }
        emit('create', param)
      } else {
        emit('update', formData)
      }
    } else {
      return false
    }
  })
}
const resetForm = () => {
  formRef.value.resetFields()
  formData.icon = ''
  formData.permissionStr = ''
  delete formData.id
  emit('update:visible')
}

const changeType = (val) => {
  if (1 == val) {
    formData.permissionStr = ''
  }
}

const filterNodeMethod = (value, data) => data.name.includes(value)
const submitBtnLoading = ref(false)
const editLoading = ref(false)
const toChangeIcon = (it) => {
  formData.icon = it.font_class
  pageData.isShowIcon = false
}
watch(
  () => props.visible,
  async (newValue, oldValue) => {
    if (newValue) {
      submitBtnLoading.value = false
      editLoading.value = true
      const { id, parentId } = props
      const res = await findTree()
      pageData.parentTreeData = res.data
      if (id) {
        const { data } = await queryMenuDetail(id)
        Object.assign(formData, data)
      } else {
        formData.parentId = parentId
      }
      editLoading.value = false
    }
  }
)
defineExpose({
  submitBtnLoading
})
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="props.visible"
    :title="id ? '修改菜单' : '新增菜单'"
    @close="resetForm"
    destroy-on-close
    width="60%"
  >
    <el-form v-loading="editLoading" ref="formRef" :model="formData" :rules="formRules" label-width="80px">
      <div class="px-4">
        <el-form-item v-if="props.menuType !== 'TOP_MENU'" prop="parentId" label="上级菜单">
          <el-tree-select
            v-model="formData.parentId"
            :data="pageData.parentTreeData"
            :filter-node-method="filterNodeMethod"
            placeholder="请输入上级菜单"
            filterable
            check-strictly
            default-expand-all
            :props="{ value: '_id', label: 'name' }"
          />
        </el-form-item>
        <el-form-item prop="name" label="菜单名称">
          <el-input v-model="formData.name" placeholder="请输入菜单名称" maxlength="30" />
        </el-form-item>
        <el-form-item prop="type" label="菜单类型">
          <el-radio-group v-model="formData.type" @change="changeType" class="ml-4">
            <el-radio label="CATALOG">目录</el-radio>
            <el-radio label="MENU">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="permissionChar" label="权限字符">
          <el-input v-model="formData.permissionChar" placeholder="请输入权限字符" maxlength="50" />
        </el-form-item>
        <el-form-item prop="sort" label="显示排序">
          <el-input-number v-model="formData.sort" :min="1" placeholder="请输入显示排序" />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleCreate" :loading="submitBtnLoading">确认</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.icon-panel-wrap {
  top: 38px;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid var(--el-border-color-light);
  z-index: 9;
  border-radius: var(--el-border-radius-base);
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
  background-color: var(--el-bg-color-overlay);
  padding: 10px;
  display: flex;
  .icon-item {
    font-size: 26px;
    margin-right: 4px;
    padding: 8px;
    cursor: pointer;
    color: #000;
    &:hover {
      background-color: #ecf5ff;
      color: #5473e8;
      svg {
        transform: scale(1.3);
        transition: all 0.3s;
      }
    }
  }
}
</style>
